<script setup>
import { NButton } from 'naive-ui'

const tableColumns = ref([
  {
    title: '序号',
    key: 'index',
    render: (_, index) => {
      return `${index + 1}`
    },
  },
  {
    title: 'Title',
    key: 'title',
  },
  {
    title: 'Length',
    key: 'length',
  },
  {
    title: 'Action',
    key: 'actions',
    render(row, index) {
      return h(
        NButton,
        {
          tertiary: true,
          size: 'small',
          onClick: () => play(row, index),
        },
        { default: () => 'Play' },
      )
    },
  },
])
const tableData = ref([
  { title: 'Wonderwall', length: '4:18' },
  { title: 'Don\'t Look Back in Anger', length: '4:48' },
  { title: 'Champagne Supernova', length: '7:27' },
])

const page = ref(1)
const pageSize = ref(10)

function play({ title, length }, index) {
  window.$message.info(`index: ${index},title: ${title},length: ${length}`)
}

function handlePage(v) {
  page.value = v
}

function handlePageSize(v) {
  pageSize.value = v
}
</script>

<template>
  <div class="simple-container">
    <n-card size="small" title="简单">
      <n-flex vertical>
        <n-data-table
          :bordered="false"
          :columns="tableColumns"
          :data="tableData"
        />

        <n-pagination
          :default-page="page" :default-page-size="pageSize"
          :item-count="3" :page-sizes="[10, 20, 30, 40]" show-quick-jumper show-size-picker justify-center
          @update:page="handlePage" @update:page-size="handlePageSize"
        >
          <template #prefix="{ itemCount }">
            共 {{ itemCount }} 项
          </template>
        </n-pagination>
      </n-flex>
    </n-card>
  </div>
</template>
